<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<!-- <view class="title">{{title}}</view> -->
			<view class="u-border-bottom">
				<u-input v-model="dataObj.username" placeholder="请输入用户名" />
			</view>
			<view class="u-border-bottom m-t-30">
				<u-input v-model="dataObj.password" type='password' :passwordIcon='true' placeholder="请输入密码" />
			</view>
			<view class='m-t-60'>
				<u-button class="submit" @click="btnSubmit" :loading='loading' type='primary'>立即登录</u-button>
				<view class="u-flex u-margin-top-20">
					<!-- <view class="u-tips-color u-font-24 u-flex-1" @click="btnRegister">前去注册</view> -->
					<!-- <view class="u-tips-color u-font-24 u-flex-1" @click="btnExperience">体验一下</view> -->
					<!-- <view class="u-tips-color u-font-24 u-flex-1" @click="btnForgotPassword">忘记密码？</view> -->
				</view>
			</view>
		</view>
		<!-- <view>
			<u-button class="m-t-20" type="primary" @click="handlePrintTable">测试表格</u-button>
			<u-button class="m-t-20" type="primary" @click="handlePrintLabel">测试打印标签</u-button>
		</view> -->
		<view class="buttom">
			<view class="hint">
				登录代表同意
				<text class="link">用户协议、隐私政策，</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/apis/sys/users.js'

	import {
		setToken,
		getToken
	} from '@/common/auth.js'

	const localStoreKey = 'username'

	export default {
		data() {
			return {
				loading: false,
				dataObj: {
					username: '',
					password: ''
				}
			}
		},
		computed: {
			title: function() {
				const copyRight = this.$store.getters.copyRight || {}
				const phoneCR = copyRight.phone || {}
				return phoneCR.loginTitle
			}
		},
		created() {
			const username = this.$ls.get(localStoreKey)
			if (username) this.$set(this.dataObj, "username", username)
		},
		onShareAppMessage(res) {
			const title = ""
			const path = `/pages/login/index`
			return {
				title,
				path
			}
		},
		methods: {
			btnRegister() {
				this.$Router.replace({
					name: "Register"
				})
			},
			btnForgotPassword() {
				this.$Router.replace({
					name: "ForgotPassword"
				})
			},
			btnSubmit() {
				const params = this.dataObj
				const username =  this.dataObj.username
				this.$ls.set(localStoreKey, username)
				
				this.validate(params).then(_ => {
					this.loading = true
					this.$store.dispatch('user/login', params).then(res => {
						this.loading = false
						uni.hideLoading()
						this.handleLoginSuccess(res)
					}).catch(err => {
						this.loading = false
						uni.hideLoading()
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			handleLoginSuccess(res) {
				const token = res.data.data
				const stoken = getToken()
				uni.switchTab({
					url: 'pages/bar/sn/index'
				})
			},
			handleJSON(obj) {
				console.log(JSON.stringify(obj));
				return JSON.stringify(obj);
			},
			handlePrintTable() {
				let list1 = this.handleJSON(['鸡蛋', '个', '5']);
				let list2 = this.handleJSON([1, 1, 1]);
				let list3 = this.handleJSON([1, 1, 1]);
				window.NativeApp.printTable(list1, list2, list3)
			},
			validate(data = {}) {
				const {
					username,
					password
				} = data
				return new Promise((resovel, reject) => {
					if (!username || username === '') {
						return reject(new Error('用户名不能为空.'))
					}
					if (!password || password === '') {
						return reject(new Error('密码不能为空.'))
					}
					return resovel()
				})
			},
			handlePrintLabel() {

				// 文字
				window.NativeApp.initCanvas(384, 220);
				let formatText = JSON.stringify({
					textSize: 24,
					align: 0,
					enUnderline: true,
					enBold: true,
					rotate: 0,
					xOffset: 2,
					yOffset: 2,
				});
				window.NativeApp.renderText('测试下', formatText);

				// 条码
				const formatBarcode = JSON.stringify({
					dotWidth: 1, //必要
					barHeight: 80, //必要
					readable: 0,
					align: 0,
					rotate: 0,
					width: 180,
					xOffset: 200,
					yOffset: 2,
				});
				window.NativeApp.renderBarCode('1234567', formatBarcode);

				// 二维码
				let formatQrCode = JSON.stringify({
					dotSize: 4,
					rotate: 0,
					width: 100,
					height: 100,
					xOffset: 10,
					yOffset: 35,
				});
				window.NativeApp.renderQrCode('今天吃饭了吗', formatQrCode);

				// 线条
				const formatArea = JSON.stringify({
					style: 1,
					width: 50,
					height: 1,
					thickness: 1,
					xOffset: 300,
					yOffset: 200,
				});
				window.NativeApp.renderArea(formatArea);

				const formatArea2 = JSON.stringify({
					style: 4,
					width: 50,
					height: 1,
					thickness: 1,
					xOffset: 100,
					yOffset: 100,
				});
				window.NativeApp.renderArea(formatArea2);

				// 打印
				window.NativeApp.printCanvas(1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.input_wrapper {
		border: 1rpx solid #eeeeee;
		border-radius: 8rpx;
		padding: 10rpx 20rpx !important;
	}

	.submit {
		height: 50px;
	}

	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				font-size: 24px;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-tips-color;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			margin-top: 60rpx;

			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-warning;
				}
			}
		}
	}
</style>